element ui 中的 el

您所在的位置：网站首页 › element ui单选框点击清空 › element ui 中的 el

element ui 中的 el

2023-05-13 13:20| 来源: 网络整理| 查看: 265

element ui 中的 el-table 实现【选择指定数据】【清空】【反选】【全选】原创

indigotang 2023-05-11 10:09:27 博主文章分类：前端 ©著作权

文章标签 element-ui 反选文章分类 TypeScript 前端开发

©著作权归作者所有：来自51CTO博客作者indigotang的原创作品，请联系作者获取转载授权，否则将追究法律责任 {{ scope.row.date }} 选择指定数据清空反选全选 import { reactive, ref } from "vue" interface User { id: number, date: string name: string address: string, status: string } const multipleTableRef = ref() const multipleSelection = ref([]) const toggleSelection = (rows?: User[]) => { if (rows) { rows.forEach((row) => { multipleTableRef.value!.toggleRowSelection(row, true) }) } else { // 清空 multipleTableRef.value!.clearSelection() } } // 反选 const selectInvert = () => { let notSelect = tableData.filter(item=>{ return multipleSelection.value.every(item2=>{ return item.id != item2.id; }) }) toggleSelection() toggleSelection(notSelect) } const handleSelectionChange = (val: User[]) => { multipleSelection.value = val } const tableData: User[] = [ { id: 1, date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, { id: 2, date: '2016-05-02', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, { id: 3, date: '2016-05-04', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, { id: 4, date: '2016-05-01', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, { id: 5, date: '2016-05-08', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, { id: 6, date: '2016-05-06', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, { id: 7, date: '2016-05-07', name: 'Tom', address: 'No. 189, Grove St, Los Angeles', status: '未确认' }, ]

说明：【选择指定数据】【清空】这两个功能是照搬官网的，参考地址：https://element-plus.gitee.io/zh-CN/component/table.html

赞收藏评论分享举报

上一篇： Vite + Vue3 + TS 配置别名

【本文地址】

element ui 中的 el

element ui 中的 el

今日新闻

推荐新闻